<template>
  <div class="container">
    <edit-page-new
      @goBackPage="goBackPage"
      :rightBtnArr="rightBtnArr"
      :showTopTitle="showTopTitle"
      :showBackBtn="true"
    >
      <div class="content">
        <dividerTitle :title="'基本信息'"></dividerTitle>
        <edit-form
          :formConfig="formConfig"
          ref="editForm"
          :formData="editFormData"
        ></edit-form>
      </div>
    </edit-page-new>
  </div>
</template>

<script>
import {
  applicationQuery,
  applicationAdd,
  applicationUpdate,
  applicationDelete,
} from "@/api/systemManagement/applicationManagement.js";
export default {
  props: {
    appId: {
      type: String,
      default: ""
    },
  },
  data() {
    return {
      showTopTitle: false,
      rightBtnArr: [
        {
          icon: "icon-a-wanchengbaocun",
          text: "保存",
          hide: false,
          methods: () => {
            this.save();
          },
        },
        {
          icon: "icon-shanchu",
          text: "删除",
          hide: false,
          methods: () => {
            this.$confirm("确定要删除这条数据吗", "提示", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }).then(() => {
              this.deleteOnce();
            });
          },
        },
      ],
      formConfig: {
        labelWidth: "100px",
        itemArr: [
          {
            span: 8,
            label: "应用名称",
            prop: "name",
            type: "text",
            disabled: false,
            required: true,
          },
          {
            span: 8,
            label: "应用编码",
            prop: "code",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "应用类型",
            prop: "type",
            type: "select",
            required: true,
            selectOption: this.$store.getters.dirtData("system_app_type")||[],
          },
          {
            span: 8,
            label: "集团组织",
            idsStr: "department",
            prop: "departmentName",
            type: "unifyUser",
            required: true,
          },
          {
            span: 8,
            label: "数据源标识",
            prop: "mark",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "数据源IP",
            prop: "dbHost",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "数据库名",
            prop: "dbName",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "数据库端口",
            prop: "dbPort",
            type: "el-number",
            required: true,
          },
          {
            span: 8,
            label: "数据库用户名",
            prop: "dbUser",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "数据库密码",
            prop: "dbPassword",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "驱动类名",
            prop: "dbDriverClassName",
            type: "text",
            required: true,
          },
          {
            span: 8,
            label: "签名方式",
            prop: "sign",
            type: "select",
            required: false,
            selectOption: this.$store.getters.dirtData("system_sign")||[],
          },
          {
            span: 8,
            label: "应用状态",
            prop: "status",
            type: "select",
            required: false,
            selectOption: [
              { label: "启用", value: 1 },
              { label: "停用", value: 0 },
            ],
          },
          {
            span: 8,
            label: "排序",
            prop: "sort",
            type: "el-number",
            precision:0,
            required: false,
          },
        ],
      },
      editFormData: {},
    };
  },
  created() {},
  watch:{
    appId:{
      handler(val){
        if (val!="") {
          this.getDetailInfo(val);
        }     
      }
    }
  },
  methods: {
    //保存用户数据
    async save() {
      let params = await this.$refs.editForm.getFormData();
      params.dbPassword = await this.$utils.encryptPassword(params.dbPassword);
      if (params.id) {
        applicationUpdate(params).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.$emit("addOrEdit");
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
      }else{
        applicationAdd(params).then(
        (res) => {
          if (res.code == 200) {
            this.$message.success(res.description);
            this.$emit("addOrEdit");
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
      }
    },
    //获取详情
    getDetailInfo(id){
      applicationQuery({ id: id}).then(res=>{
        this.editFormData = res.data;
      })
    },
    //删除单条数据
    deleteOnce() {
      let params = {
        id: this.editFormData.id,
      };
      applicationDelete(params).then(
        (res) => {
          if (res.code === 200) {
            this.$message.success(res.description);
            this.$emit("deleteOnce");
          }
        },
        (error) => {
          this.$message.error(error);
        }
      );
    },
    goBackPage() {
      this.editFormData = {};
      this.$emit("goBackPage");
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  height: 100%;
  padding: 0 30px;
  background-color: white;
  .content {
    padding: 10px;
    margin-top: 10px;
  }
}
</style>